"use client"
import React, { useEffect, useState } from "react";
import {
    Button,
    Col,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select,
    Space,
    Switch,
    Table,
    TableProps,
    Tooltip,
    Tree
} from 'antd';




import useResponsiveLayout from "@/utils/useResponsiveLayout";
import { listExpression } from "@/clientApi/flowable/definition/expression";

// 定义组件的 props 类型
interface MyComponentProps {
    SelectOption: (e: any) => void;
    type?: 'checkbox' | 'radio';
}

const CheckExpressionTableView: React.FC<MyComponentProps> = (props) => {
    const initialQueryParams = {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        // beginTime: null,
        // endTime: null,

    };

    interface DataType {
    }

    const [form] = Form.useForm();
    const [record, setRecord] = useState<Record<string, any>>({});
    const [forceUpdateKey, setForceUpdateKey] = useState(0); // 用于强制更新组件的 key
    const [dataList, setDataList] = useState<DataType[]>([
  
    ]);
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '主键',
            dataIndex: 'id',
            key: 'id',
            width: '200',
            align: 'center',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: '表达式',
            dataIndex: 'expression',
            key: 'expression',
            align: 'center',
        }, {
            title: '表达式类型',
            dataIndex: 'dataType',
            key: 'dataType',
            align: 'center',
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
        },
    ];
    const [queryParams, setQueryParams] = useState(initialQueryParams);
    const [total, setTotal] = useState(0);
    useEffect(() => {
        getList();
    }, [queryParams]);  // 监听 queryParams 变化，调用 getList

    /** 查询用户列表 */
    function getList() {
        listExpression(queryParams).then((res: any) => {
            setDataList(res.rows.map((item: any) => ({
                ...item,
                key: item.id // 使用 userId 作为唯一的 key
            })))
            setTotal(res.total); // 更新 total，用于分页
        });
    }

    // 查询列表
    function handleSearch() {
        form.validateFields().then(values => {
            console.log(values, 'values')
            setQueryParams(prevQueryParams => ({
                ...queryParams,
                name: values.name,
            }));
        });
    }

    // 重置查询
    const resetSearch = () => {
        form.resetFields();
        setQueryParams(initialQueryParams); // 重置为初始状态
    }

    // 分页变化
    const handleTableChange = (page: number, pageSize: number) => {
        setQueryParams({
            ...queryParams,
            pageNum: page,
            pageSize: pageSize,
        });
    };


    const SelectTableChange = (record: any, selected: any, selectedRows: any,) => {
        props.SelectOption(selectedRows)
    }
    const rowSelection: TableProps<DataType>['rowSelection'] = {
        type: props.type,
        onSelect: SelectTableChange,
        onSelectAll: SelectTableChange,
    }
    return (
        <div className='home'>
            <Row gutter={20} style={{ paddingTop: "20px" }}>
                <Col span={24}>
                    <div><Form
                        form={form}
                        name="customized_form_controls"
                        style={{ marginTop: 10, marginLeft: 10, marginBottom: 10 }}
                        layout={useResponsiveLayout("inline")}>
                        <Form.Item
                            name="name"
                            label="表达式名称">
                            <Input />
                        </Form.Item>
                        
                       
                        <Form.Item>
                            <Button type="primary" htmlType="submit" onClick={handleSearch} style={{
                                marginRight: 20,
                            }}>
                                查询
                            </Button>
                            <Button type="primary" htmlType="reset" onClick={resetSearch}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form></div>
                    <Table<DataType> scroll={{x:'max-content'}} rowKey="id" columns={columns} dataSource={dataList} pagination={{
                        current: queryParams.pageNum,
                        pageSize: queryParams.pageSize,
                        total: total,
                        showSizeChanger: true, // 显示分页尺寸切换器
                        pageSizeOptions: ['10', '20', '50'], // 分页尺寸选项
                        onChange: handleTableChange
                    }}
                        rowSelection={rowSelection}
                    />
                </Col>
            </Row>

        </div>
    )
};
export default CheckExpressionTableView;
